import { TemplateData } from './types';
import { renderTemplate } from './utils';

/**
 * 弹出层主模板
 */
export const modalTemplate = `
<div id="airdrop-modal-wrapper" class="airdrop-modal-wrapper airdrop-modal-hidden airdrop-modal-p-4 airdrop-modal-sm-p-0">
  <div id="airdrop-checker-modal" class="airdrop-modal">
    <div id="airdrop-modal-loading-overlay" 
         class="airdrop-modal-absolute airdrop-modal-inset-0 airdrop-modal-loading-overlay airdrop-modal-hidden airdrop-modal-z-15 airdrop-modal-flex airdrop-modal-items-center airdrop-modal-justify-center">
    </div>
    
    <div class="airdrop-modal-header-border-color airdrop-modal-p-6 airdrop-modal-border-b airdrop-modal-flex airdrop-modal-justify-between airdrop-modal-items-center airdrop-modal-sticky airdrop-modal-top-0 airdrop-modal-sm-top-auto airdrop-modal-md-top-0 airdrop-modal-z-20 airdrop-modal-header-border-color airdrop-modal-header-bg"> 
      <div class="airdrop-modal-flex airdrop-modal-items-center airdrop-modal-space-x-4"> 
        <img id="airdrop-modal-app-logo" src="https://placehold.co/48x48/1D4ED8/FFFFFF?text=AC" alt="App Logo" class="airdrop-modal-w-12 airdrop-modal-h-12 airdrop-modal-rounded-lg airdrop-modal-object-cover airdrop-modal-shadow-md"> 
        <h1 id="airdrop-modal-app-name" class="airdrop-modal-text-2xl airdrop-modal-font-semibold airdrop-modal-main-text-color">Airdrop Checker</h1> 
      </div>
    </div>

    <div class="airdrop-modal-p-6 airdrop-modal-space-y-6 airdrop-modal-overflow-y-auto airdrop-modal-flex-grow airdrop-modal-modal-content airdrop-modal-custom-scrollbar airdrop-modal-relative"> 
      <div class="airdrop-modal-p-5 airdrop-modal-rounded-xl airdrop-modal-text-center airdrop-modal-card-shadow airdrop-modal-project-desc-bg"> 
        <p id="airdrop-modal-project-desc-text" class="airdrop-modal-text-base airdrop-modal-project-desc-text-color">This XXX Project is airdropping a total of 1,000,000 $TOKEN to eligible users.</p>
      </div>

      <div id="airdrop-modal-timeline-status-section" class="airdrop-modal-space-y-5">
        <div class="airdrop-modal-relative airdrop-modal-py-4">
          <div id="airdrop-modal-timeline-connector-bg" class="airdrop-modal-timeline-connector">
             <div id="airdrop-modal-timeline-progress" class="airdrop-modal-h-full airdrop-modal-timeline-progress" style="width: 50%;"></div>
          </div>
          <div class="airdrop-modal-flex airdrop-modal-justify-between">
            <div class="airdrop-modal-timeline-node airdrop-modal-text-center airdrop-modal-w-0.3" style="width: 33.3%;">
              <span class="airdrop-modal-block airdrop-modal-text-sm airdrop-modal-font-medium airdrop-modal-mt-2 airdrop-modal-timeline-label-color">Start</span>
              <span class="airdrop-modal-block airdrop-modal-text-xs airdrop-modal-timeline-date-color">May 01</span>
            </div>
            <div class="airdrop-modal-timeline-node active airdrop-modal-text-center airdrop-modal-w-0.3" style="width: 33.3%;">
              <span class="airdrop-modal-block airdrop-modal-text-sm airdrop-modal-font-semibold airdrop-modal-mt-2" style="color: rgb(37, 99, 235);">Current</span>
              <span class="airdrop-modal-block airdrop-modal-text-xs airdrop-modal-timeline-date-color">May 10</span>
            </div>
            <div class="airdrop-modal-timeline-node airdrop-modal-text-center airdrop-modal-timeline-node-inactive-color airdrop-modal-w-0.3" style="width: 33.3%;">
              <span class="airdrop-modal-block airdrop-modal-text-sm airdrop-modal-font-medium airdrop-modal-mt-2 airdrop-modal-timeline-label-color">End</span>
              <span class="airdrop-modal-block airdrop-modal-text-xs airdrop-modal-timeline-date-color">May 30</span>
            </div>
          </div>
        </div>

        <div class="airdrop-modal-status-card-bg airdrop-modal-p-5 airdrop-modal-rounded-xl airdrop-modal-space-y-4 airdrop-modal-shadow-lg airdrop-modal-card-shadow" style="rgb(249 250 251 / var(--tw-bg-opacity, 1))"> 
          <div class="airdrop-modal-flex airdrop-modal-justify-between airdrop-modal-items-center">
            <span class="airdrop-modal-text-base airdrop-modal-font-medium airdrop-modal-flex airdrop-modal-items-center airdrop-modal-status-text-color">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="airdrop-modal-mr-2 airdrop-modal-opacity-90"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="m9 12 2 2 4-4"></path></svg>
              Status:
            </span>
            <div class="airdrop-modal-px-3.5 airdrop-modal-py-1.5 airdrop-modal-text-sm airdrop-modal-font-semibold airdrop-modal-rounded-full airdrop-modal-flex airdrop-modal-items-center airdrop-modal-space-x-2 airdrop-modal-status-tag-bg airdrop-modal-status-tag-text-color" style="background: rgba(16, 185, 129, 0.2);color: rgb(16, 185, 129);padding-top: 0.375rem;padding-bottom: 0.375rem;padding-left: 0.875rem;padding-right: 0.875rem;">
              <span class="airdrop-modal-w-2.5 airdrop-modal-h-2.5 airdrop-modal-status-indicator-color airdrop-modal-rounded-full airdrop-modal-pulse-indicator" style="width: 0.625rem;height: 0.625rem;background-color: rgb(16, 185, 129);"></span>
              <span>Claim Open</span>
            </div>
          </div>
          <div class="airdrop-modal-text-center airdrop-modal-space-y-1.5 airdrop-modal-pt-2">
            <p class="airdrop-modal-text-sm airdrop-modal-flex airdrop-modal-items-center airdrop-modal-justify-center airdrop-modal-countdown-label-color">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="airdrop-modal-mr-2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
              Ends in:
            </p>
            <div id="airdrop-modal-countdown-display" class="airdrop-modal-flex airdrop-modal-justify-center airdrop-modal-items-center airdrop-modal-space-x-1.5 airdrop-modal-font-roboto-mono airdrop-modal-text-2xl airdrop-modal-font-bold airdrop-modal-countdown-value-color airdrop-modal-min-h-[48px]" style="minHeight: 48px;margin-top: 0.375rem;"> 
              <div class="airdrop-modal-countdown-unit-container"><span class="airdrop-modal-flip-animate-container"><span id="airdrop-modal-days-value" class="airdrop-modal-p-25 airdrop-modal-countdown-unit-bg airdrop-modal-rounded-lg airdrop-modal-shadow-inner" style="background-color: rgb(229, 231, 235);">20</span></span><span class="airdrop-modal-text-sm airdrop-modal-font-medium airdrop-modal-ml-3/2 airdrop-modal-countdown-unit-label-color" >d</span></div>
              <div class="airdrop-modal-countdown-unit-container"><span class="airdrop-modal-flip-animate-container"><span id="airdrop-modal-hours-value" class="airdrop-modal-p-25 airdrop-modal-countdown-unit-bg airdrop-modal-rounded-lg airdrop-modal-shadow-inner" style="background-color: rgb(229, 231, 235);">05</span></span><span class="airdrop-modal-text-sm airdrop-modal-font-medium airdrop-modal-ml-3/2 airdrop-modal-countdown-unit-label-color" >h</span></div>
              <div class="airdrop-modal-countdown-unit-container"><span class="airdrop-modal-flip-animate-container"><span id="airdrop-modal-minutes-value" class="airdrop-modal-p-25 airdrop-modal-countdown-unit-bg airdrop-modal-rounded-lg airdrop-modal-shadow-inner" style="background-color: rgb(229, 231, 235);">42</span></span><span class="airdrop-modal-text-sm airdrop-modal-font-medium airdrop-modal-ml-3/2 airdrop-modal-countdown-unit-label-color">m</span></div>
              <div class="airdrop-modal-countdown-unit-container"><span class="airdrop-modal-flip-animate-container"><span id="airdrop-modal-seconds-value" class="airdrop-modal-p-25 airdrop-modal-countdown-unit-bg airdrop-modal-rounded-lg airdrop-modal-shadow-inner" style="background-color: rgb(229, 231, 235);">18</span></span><span class="airdrop-modal-text-sm airdrop-modal-font-medium airdrop-modal-ml-3/2 airdrop-modal-countdown-unit-label-color">s</span></div>
            </div>
          </div>
        </div>
      </div>

      <div class="airdrop-modal-space-y-5"> 
        <div id="airdrop-modal-query-state" class="airdrop-modal-state-container active airdrop-modal-space-y-5">
          <div class="airdrop-modal-relative">
            <input type="text" id="airdrop-modal-address-input"
                   class="airdrop-modal-w-full airdrop-modal-h-14 airdrop-modal-px-5 airdrop-modal-py-3 airdrop-modal-pr-16 airdrop-modal-text-base airdrop-modal-border airdrop-modal-rounded-xl airdrop-modal-focus-outline-none airdrop-modal-transition-all airdrop-modal-duration-200 airdrop-modal-input-bg airdrop-modal-input-text-color airdrop-modal-input-border-color airdrop-modal-focus-ring-color airdrop-modal-shadow-sm airdrop-modal-input-override"
                   placeholder="Enter or paste wallet address (0x...)"
                   style="outline: none; box-shadow: none; border-style: solid; border-width: 1px;"
            >
            <button id="airdrop-modal-connect-wallet-btn" title="Connect Wallet"
                    style="position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: none !important; border: none !important;"
                    class="airdrop-modal-p-25 airdrop-modal-rounded-lg airdrop-modal-transition-colors airdrop-modal-connect-wallet-icon-color airdrop-modal-hover-bg-opacity wallet-btn-hover"
                    onmouseover="this.style.backgroundColor='rgb(219 234 254 / 1)'" 
                    onmouseout="this.style.backgroundColor='transparent'">
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"></path>
                <path d="M3 5v14a2 2 0 0 0 2 2h16v-5"></path>
                <path d="M18 12a2 2 0 0 0 0 4h4v-4h-4z"></path>
              </svg>
            </button>
          </div>
          <button id="airdrop-modal-query-button"
                  class="airdrop-modal-w-full airdrop-modal-h-14 airdrop-modal-text-lg airdrop-modal-font-semibold airdrop-modal-rounded-xl airdrop-modal-transition-all airdrop-modal-duration-200 airdrop-modal-focus-outline-none airdrop-modal-query-btn-bg airdrop-modal-query-btn-text-color airdrop-modal-hover-query-btn-bg airdrop-modal-shadow-md airdrop-modal-hover-shadow-lg">
            Check Eligibility
          </button>
        </div>

        <div id="airdrop-modal-loading-state" class="airdrop-modal-state-container airdrop-modal-hidden airdrop-modal-flex airdrop-modal-flex-col airdrop-modal-items-center airdrop-modal-justify-center airdrop-modal-text-center airdrop-modal-min-h-250 airdrop-modal-space-y-4"> 
           <input type="text" class="airdrop-modal-w-full airdrop-modal-h-14 airdrop-modal-px-5 airdrop-modal-py-3 airdrop-modal-text-base airdrop-modal-border airdrop-modal-rounded-xl airdrop-modal-cursor-not-allowed airdrop-modal-disabled-input-bg airdrop-modal-disabled-input-text-color airdrop-modal-disabled-input-border-color"
                   placeholder="0x..." disabled id="airdrop-modal-loading-address-input">
          <button class="airdrop-modal-w-full airdrop-modal-h-14 airdrop-modal-text-lg airdrop-modal-font-semibold airdrop-modal-rounded-xl airdrop-modal-flex airdrop-modal-items-center airdrop-modal-justify-center airdrop-modal-space-x-2.5 airdrop-modal-cursor-not-allowed airdrop-modal-disabled-btn-bg airdrop-modal-shadow-md">
            <div class="airdrop-modal-loader airdrop-modal-loader-border-color airdrop-modal-loader-top-color"></div>
            <span class="airdrop-modal-disabled-btn-text-color">Checking...</span>
          </button>
        </div>

        <div id="airdrop-modal-success-state" class="airdrop-modal-state-container airdrop-modal-hidden airdrop-modal-space-y-5 airdrop-modal-relative">
           
          <div class="airdrop-modal-p-6 airdrop-modal-rounded-xl airdrop-modal-text-center airdrop-modal-space-y-5 airdrop-modal-relative airdrop-modal-z-10 airdrop-modal-success-card-bg airdrop-modal-success-card-border airdrop-modal-card-shadow">
            <div class="airdrop-modal-inline-flex airdrop-modal-items-center airdrop-modal-justify-center airdrop-modal-w-24 airdrop-modal-h-24 airdrop-modal-rounded-full airdrop-modal-float-gift airdrop-modal-success-icon-outer-bg airdrop-modal-shadow-lg">
               <div class="airdrop-modal-inline-flex airdrop-modal-items-center airdrop-modal-justify-center airdrop-modal-w-20 airdrop-modal-h-20 airdrop-modal-rounded-full airdrop-modal-success-icon-inner-bg">
                  <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="airdrop-modal-success-icon-color">
                    <path d="M20 12v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-4"/>
                    <path d="M4 10V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4"/>
                    <path d="M12 22v-8"/>
                    <path d="m15 10-3-3-3 3"/>
                    <path d="M4.5 10.5h15"/>
                  </svg>
              </div>
            </div>
            <h3 class="airdrop-modal-text-2xl airdrop-modal-font-semibold airdrop-modal-success-title-color">Congratulations! You are eligible!</h3>
            
            <div class="airdrop-modal-p-5 airdrop-modal-rounded-lg airdrop-modal-shadow-inner airdrop-modal-claim-details-bg">
              <p class="airdrop-modal-text-base airdrop-modal-claim-details-label-color">Available to claim:</p>
              <p class="airdrop-modal-text-4xl airdrop-modal-font-bold airdrop-modal-claim-details-value-color" id="airdrop-modal-claim-amount-token">123.45 $TOKEN</p>
              <p class="airdrop-modal-text-base airdrop-modal-claim-details-usd-color" id="airdrop-modal-claim-amount-usd">≈ $12.34 USD</p>
            </div>
             <button id="airdrop-modal-claim-button"
                    class="airdrop-modal-w-full airdrop-modal-h-14 airdrop-modal-text-lg airdrop-modal-font-semibold airdrop-modal-rounded-xl airdrop-modal-transition-all airdrop-modal-duration-200 airdrop-modal-focus-outline-none airdrop-modal-claim-btn-bg airdrop-modal-claim-btn-text-color airdrop-modal-hover-claim-btn-bg airdrop-modal-shadow-md airdrop-modal-hover-shadow-lg">
              Claim Now
            </button>
          </div>
        </div>

        <div id="airdrop-modal-failure-state" class="airdrop-modal-state-container airdrop-modal-hidden airdrop-modal-space-y-5">
          <div class="airdrop-modal-p-6 airdrop-modal-rounded-xl airdrop-modal-text-center airdrop-modal-space-y-4 airdrop-modal-failure-card-bg airdrop-modal-failure-card-border airdrop-modal-card-shadow">
            <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="airdrop-modal-mx-auto airdrop-modal-failure-icon-color">
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="12" y1="8" x2="12" y2="12"></line>
              <line x1="12" y1="16" x2="12.01" y2="16"></line>
            </svg>
            <h3 class="airdrop-modal-text-2xl airdrop-modal-font-semibold airdrop-modal-failure-title-color">Sorry, this address is not eligible.</h3>
            <p class="airdrop-modal-text-base airdrop-modal-failure-text-color">You can try another wallet address or check the event rules.</p>
          </div>
          <button id="airdrop-modal-recheck-button"
                  class="airdrop-modal-w-full airdrop-modal-h-14 airdrop-modal-text-lg airdrop-modal-font-semibold airdrop-modal-rounded-xl airdrop-modal-transition-all airdrop-modal-duration-200 airdrop-modal-focus-outline-none airdrop-modal-recheck-btn-bg airdrop-modal-hover-recheck-btn-bg airdrop-modal-recheck-btn-text-color airdrop-modal-shadow-md airdrop-modal-hover-shadow-lg">
            Check Another Address
          </button>
        </div>
      </div>
    </div>
    <div class="airdrop-modal-p-4 airdrop-modal-border-t airdrop-modal-text-center airdrop-modal-footer-bg airdrop-modal-footer-border airdrop-modal-sticky airdrop-modal-bottom-0 airdrop-modal-z-20">
      <p class="airdrop-modal-text-xs airdrop-modal-footer-text-color" id="airdrop-modal-footer-text">Powered by Airdrop Modal TS</p>
    </div>
  </div>
</div>
`; 